<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="Author" content="Dreamer-1.">
		<!-- 引入各种CSS样式表 -->
		<link rel="stylesheet" href="/static/css/bootstrap.css">
		<link rel="stylesheet" href="/static/css/font-awesome.css">
		<link rel="stylesheet" href="/static/css/index.css">	<!-- 修改自Bootstrap官方Demon，你可以按自己的喜好制定CSS样式 -->
		<link rel="stylesheet" href="/static/css/font-change.css">	<!-- 将默认字体从宋体换成微软雅黑（个人比较喜欢微软雅黑，移动端和桌面端显示效果比较接近） -->

		<script type="text/javascript" src="/static/js/jquery-1.12.3.min.js"></script>
		<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>

		<title>-python 监控系统 -</title>
	</head>

	<body>
	<!-- 顶部菜单（来自bootstrap官方Demon）==================================== -->
		<nav class="navbar navbar-inverse navbar-fixed-top">
      		<div class="container">
        		<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" >
		            	<span class="sr-only">Toggle navigation</span>
		            	<span class="icon-bar"></span>
		            	<span class="icon-bar"></span>
		            	<span class="icon-bar"></span>
					</button>
	          		<a class="navbar-brand" href="index.html">http://www.yuhuashi.info</a>
        		</div>
      		</div>
    	</nav>

	<!-- 左侧菜单选项========================================= -->
		<div class="container-fluid">
			<div class="row-fluie">
				<div class="col-sm-3 col-md-2 sidebar">
					<ul class="nav nav-sidebar">
						<!-- 一级菜单 -->
						<li class="active">
                            <a href="#userMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
							    <i class="fa fa-cog fa-spin"></i>&nbsp; 系统监控项<span class="sr-only">(current)</span></a>
						</li>
						<!-- 二级菜单 -->
						<!-- 注意一级菜单中<a>标签内的href="#……"里面的内容要与二级菜单中<ul>标签内的id="……"里面的内容一致 -->
						<ul id="userMeun" class="nav nav-list collapse menu-second">
							<li><a href="#meminfo" onclick="showAtRight('/user/memory')"> <i class="fa fa-list-alt"></i>系统内存监控</a></li>
                            <li><a href="#diskinfo" onclick="showAtRight('/user/disk')"> <i class="fa fa-list-alt"></i>磁盘空间监控</a></li>
                            <li><a href="#cpuinfo" onclick="showAtRight('/user/cpu')"><i class="fa fa-list-alt"></i> CPU使用率监控</a></li>
                            <li><a href="#network" onclick="showAtRight('/user/network')"> <i class="fa fa-list-alt"></i>网络使用监控</a></li>
                            <li><a href="#io" onclick="showAtRight('/user/io')"> <i class="fa fa-list-alt"></i>磁盘IO监控</a></li>
						</ul>

						<li><li class="active"><a href="#productMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
							 <i class="fa fa-cog fa-spin"></i>&nbsp; 数据库监控<span class="sr-only">(current)</span></a>
						</li>

						<ul id="productMeun" class="nav nav-list collapse menu-second">
							<li><a href="#tabinfo" onclick="showAtRight('/user/tablespace')"><i class="fa fa-list-alt"></i> Oracle表空间</a></li>
                            <li><a href="#sgainfo" onclick="showAtRight('/user/sga')"><i class="fa fa-list-alt"></i> OracleSGA监控</a></li>
                            <li><a href="#sessions/processes" onclick="showAtRight('/user/sessions')"><i class="fa fa-list-alt"></i> Oracle连接数</a></li>
                            <li><a href="#archivelog" onclick="showAtRight('/user/archivelog')"><i class="fa fa-list-alt"></i> Oracle归档监控</a></li>
                            <li><a href="#hit_ratio" onclick="showAtRight('/user/hit_ratio')"><i class="fa fa-list-alt"></i> Oracle Hit Ratio</a></li>
						</ul>

						<li><li class="active"><a href="#recordMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
							<i class="fa fa-cog fa-spin"></i>&nbsp; 自定义监控 <span class="sr-only">(current)</span></a>
						</li>
						<ul id="recordMeun" class="nav nav-list collapse menu-second">
							<li><a href="###" onclick="showAtRight('/record/list')" ><i class="fa fa-list"></i> 订单列表</a></li>
						</ul>
					</ul>

				</div>
			</div>
		</div>

<!-- 右侧内容展示==================================================   -->
 				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
					<h1 class="page-header"><i class="fa fa-cog fa-spin"></i>&nbsp;控制台<small>&nbsp;&nbsp;&nbsp;欢迎使用python监控管理系统</small></h1>

				<!-- 载入左侧菜单指向的jsp（或html等）页面内容 -->
          				<div id="content">
                           <!-- 内存监控 -->
                                   <script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
                                   <script type="text/javascript" src="/static/js/highstock.js"></script>
                                   <script type="text/javascript" src="/static/js/exporting.js"></script>
                                   <script type="text/javascript" src="/static/js/highcharts-zh_CN.js"></script>
                                   <script type="text/javascript" src="/static/js/jisuan.js"></script>
                                    <script type="text/javascript" src="/static/js/dark-unica.js"></script>
                                   
       						<h4>
   								<strong>使用指南：</strong><br>
   								<br><br>默认页面内容……
       						</h4>

          				</div>
				</div>


		<script type="text/javascript">
			function showAtRight(url){
				$.ajax({
                    type :"GET",
                    url : url,
                    dataType:"html",
                    success : function(data) {//返回数据根据结果进行相应的处理
                        $("#content").html(data);
                    },
					error:function(){
						$("#content").html("获取数据失败！");
					}
                });
			}
		</script>

	</body>
</html>
